<!--
 * @Author: 杨光辉(GerhardYang)
 * @Date: 2021-06-02 17:24:24
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-08-09 09:22:03
 * @Description: file content
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->
<template>
  <a-button-group id="spatial_query">
    <a-button type="link" @click="search('Polyline')" title="沿线查询">
      <icon-font type="icon-icon-line-graph" />
    </a-button>

    <a-button type="link" @click="search('Polygon')" title="多边形查询">
      <icon-font type="icon-draw-polygon-solid" />
    </a-button>

    <a-button type="link" @click="search('Rectangle')" title="矩形查询">
      <icon-font type="icon-mianji" />
    </a-button>

    <a-button type="link" @click="search('Circle')" title="画圆查询">
      <icon-font type="icon-yuan" />
    </a-button>

    <a-button type="link" @click="search('click')" title="清除">
      <icon-font type="icon-shanchu11" />
    </a-button>
  </a-button-group>
</template>

<script>
import { Icon } from "ant-design-vue";
// 自定义图标
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "./iconfont/iconfont.js",
});

export default {
  components: {
    IconFont,
  },
  computed: {},
  methods: {
    //查询
    search(type) {
      this.$eventBus.$emit("queryType", type);
    },
  },
};
</script>

<style lang="less" scoped>
#spatial_query {
  height: 40px;
  width: 260px;
  bottom: 0;
  text-align: center;
  margin-left: 0px;
  padding: 0;
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid;
  .tools-title {
    line-height: 40px !important;
    font-size: 14px !important;
  }
  i {
    line-height: 40px !important;
    font-size: 20px !important;
  }
}
</style>
